<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上传管理</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />

    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="/admin/css/font.css">
    <link rel="stylesheet" href="/admin/css/xadmin.css">
    <link rel="stylesheet" href="/layui/css/layui.css"  media="all">
    <script type="text/javascript" src="/admin/js/jquery3.2.1.min.js"></script>
    <script src="/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/admin/js/xadmin.js"></script>

</head>
<body>
<div class="x-nav">

    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
</div>
<div class="layui-fluid">
    <div class="layui-upload">
        <button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件</button>
        <div class="layui-upload-list" style="max-width: 1000px;">
            <table class="layui-table">
                <colgroup>
                    <col>
                    <col width="150">
                    <col width="260">
                    <col width="150">
                </colgroup>
                <thead>
                <tr><th>文件名</th>
                    <th>大小</th>
                    <th>上传进度</th>
                    <th>操作</th>
                </tr></thead>
                <tbody id="demoList"></tbody>
            </table>
        </div>
        <button type="button" class="layui-btn" id="testListAction">开始上传</button>
        <table class="layui-table" id="LAY_table_user" lay-filter="user">
            <script type="text/html" id="barDemo">

                    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script>
    </div>
</div>
</body>
<style type="text/css">
    .layui-table-cell{
        text-align:center;
        height: auto;
        white-space: normal;
    }
</style>
<script>layui.use(['element', 'table'],
        function() {
            var table = layui.table,element = layui.element //元素操作;

            //监听单元格编辑
            table.on('edit(test)',
                function(obj) {
                    var value = obj.value //得到修改后的值
                        ,
                        data = obj.data //得到所在行所有键值
                        ,
                        field = obj.field; //得到字段
                    layer.msg('[ID: ' + data.id + '] ' + field + ' 字段更改为：' + value);
                });

            //监听工具条
            table.on('tool(user)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data //获得当前行数据
                    ,layEvent = obj.event; //获得 lay-event 对应的值
                if(layEvent === 'del'){
                    layer.confirm('确定要删除吗！', function(index){
                        var id=data.id;

                        $.ajax({
                            url:"delete.php",
                            data:{id:id},//传递到处理页面的值，也是JSON数据，要用{}。如果传2个值就在{}里面加逗号，再写另外1个值。
                            type:"POST",
                            dataType:"json",
                            success:function(data){
                                if(data.status !== 200){
                                    layer.msg(data.msg);
                                    return false;
                                }
                                layer.msg(data.msg);
                                obj.del(); //删除对应行（tr）的DOM结构
                                layer.close(index);
                            },

                        });

                        //向服务端发送删除指令
                    });
                }
            });
            //方法级渲染
            table.render({
                elem: '#LAY_table_user'
                ,url: "admin.php"
                ,limits:[10,20,30]
                ,cols: [[
                    {field:'id', title: 'ID', width:'5%', sort: true}
                    ,{field:'name', title: '图片名称'}
                    ,{field:'thumb_image', title: '缩略图',templet:"#thumb_img",align: "center"}
                    ,{width: 165, align:'center', toolbar: '#barDemo'}
                ]]
                ,id: 'testReload'
                ,page: true
                ,height: 'full-90'
            });
            var $ = layui.$, active = {
                reload: function(){
                    var title = $('#title');

                    //执行重载
                    table.reload('testReload', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        ,where: {
                            name: title.val()
                        }
                    });
                }
            };

            $('.demoTable .layui-btn').on('click', function(){
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
        });
</script>
<script>layui.use(['upload', 'element', 'layer'],
        function() {
            $ = layui.jquery
                ,upload = layui.upload
                ,element = layui.element
                ,layer = layui.layer;
            //演示多文件列表
            var uploadListIns = upload.render({
                elem: '#testList'
                ,elemList: $('#demoList') //列表元素对象
                ,url: 'upload.php' //此处用的是您自己的上传接口即可。
                ,accept: 'file'
                ,multiple: true
                ,number: 999
                ,auto: false
                ,bindAction: '#testListAction'
                ,choose: function(obj){
                    var that = this;
                    var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                    //读取本地文件
                    obj.preview(function(index, file, result){
                        var tr = $(['<tr id="upload-'+ index +'">'
                            ,'<td>'+ file.name +'</td>'
                            ,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
                            ,'<td><div class="layui-progress" lay-filter="progress-demo-'+ index +'"><div class="layui-progress-bar" lay-percent=""></div></div></td>'
                            ,'<td>'
                            ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                            ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                            ,'</td>'
                            ,'</tr>'].join(''));

                        //单个重传
                        tr.find('.demo-reload').on('click', function(){
                            obj.upload(index, file);
                        });

                        //删除
                        tr.find('.demo-delete').on('click', function(){
                            delete files[index]; //删除对应的文件
                            tr.remove();
                            uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                        });

                        that.elemList.append(tr);
                        element.render('progress'); //渲染新加的进度条组件
                    });
                }
                ,done: function(res, index, upload){ //成功的回调
                    var that = this;
                    //if(res.code == 0){ //上传成功
                    var tr = that.elemList.find('tr#upload-'+ index)
                        ,tds = tr.children();
                    tds.eq(3).html(''); //清空操作
                    delete this.files[index]; //删除文件队列已经上传成功的文件
                    return;
                    //}
                    this.error(index, upload);
                }
                ,allDone: function(obj){ //多文件上传完毕后的状态回调
                    console.log(obj)
                }
                ,error: function(index, upload){ //错误回调
                    var that = this;
                    var tr = that.elemList.find('tr#upload-'+ index)
                        ,tds = tr.children();
                    tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
                }
                ,progress: function(n, elem, e, index){ //注意：index 参数为 layui 2.6.6 新增
                    element.progress('progress-demo-'+ index, n + '%'); //执行进度条。n 即为返回的进度百分比
                }
            });

        });</script>
<script type="text/html" id="thumb_img">
    <img  src="{{d.thumb_image}}" >
</script>
</html>